<template>
  <div>
    <BasicTable @register="registerTable" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { recordPageList, recordVersionDown } from '@/api/version';
  import Dictionary from '@/utils/dictionary';

  const dicts = Dictionary.getLocalMulti(['recordStatus', 'releaseType']);

  const [registerTable] = useTable({
    title: '开启搜索区域',
    api: recordPageList,
    columns: getBasicColumns(),
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `status`,
          label: `状态`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: dicts.recordStatus,
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `version`,
          label: `版本号`,
          component: 'ApiSelect',
          componentProps: {
            api: () =>
              recordVersionDown().then((res) => {
                return res.map((item) => {
                  return {
                    label: item,
                    value: item,
                  };
                });
              }),
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `releaseType`,
          label: `发布类型`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: dicts.releaseType,
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `organizationName`,
          label: `机构名称`,
          component: 'Input',
          colProps: {
            span: 4,
          },
        },
        {
          field: `wechatAppName`,
          label: `小程序名称`,
          component: 'Input',
          colProps: {
            span: 4,
          },
        },
      ],
    },
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    afterFetch: (data) => {
      return data.map((item) => {
        return {
          ...item,
          releaseType: dicts.releaseType.find((v) => v.dictValue == item.releaseType)?.dictLabel,
          status: dicts.recordStatus.find((v) => v.dictValue == item.status)?.dictLabel,
        };
      });
    },
  });
</script>
